<script setup lang="ts">
import CloseSvg from "@/assets/svg/bench/close.svg?component";
import LineChartVue from "./LineChart.vue";
const props = defineProps(["chartData", "title"]);
const visible = defineModel();
const option = {
  grid: {
    bottom: 0,
    left: 0,
    right: 5,
    top: 44,
    containLabel: true
  },
  toolbox: {
    feature: {
      dataZoom: {
        yAxisIndex: "none",
        title: {
          zoom: "区域缩放",
          back: "区域缩放还原"
        }
      },
      restore: {
        title: "还原"
      }
    },
    iconStyle: {
      borderColor: "rgba(255,255,255,0.62)"
    }
  }
};
</script>
<template>
  <px-dialog v-model="visible" class="leader-screen-lines-dialog" width="880px" :show-close="false">
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">
          <div class="title-content">{{ chartData.name }}</div>
        </h4>
        <px-icon class="close-svg" @click="close"><CloseSvg /></px-icon>
      </div>
    </template>
    <LineChartVue class="chart-lines" :customoption="option" :data="chartData" :xAxisData="chartData.xAxisData" />
  </px-dialog>
</template>
<style lang="scss">
.close-svg {
  width: 16px;
  height: 16px;
}
.leader-screen-lines-dialog {
  background-color: #091228;
  background-image: url("/ifp-web-static/image/all/leadScreenNew/dialogBg.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;

  .px-dialog__header {
    padding: 22rpx 17rpx 20rpx 40rpx;
  }
  .px-dialog__body {
    padding: 0 36rpx;
  }
  .my-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .px-dialog__title .title-content {
    font-size: 18rpx;
    font-family: DOUYUFont;
    color: #ffffff;
    line-height: 24rpx;
    letter-spacing: 1px;
    text-shadow: 0px 2rpx 4rpx rgba(0, 0, 0, 0.5);
  }
  .chart-lines {
    height: 454rpx;
  }
}
</style>
